<template>

  <el-dialog
      top="20px"
      :title="defaultValue.title"
      :visible="tableConfig.show"
      @close="tableConfig.show = false"
      :show-close="tableConfig.showClose"
      :destroy-on-close="tableConfig.destroyOnClose"
      width="1100px">

    <el-row style="">
      <el-col :span="24">
        <el-descriptions class="margin-top" title=""  :column="3" :size="size" :contentStyle="CS" :label-style="LS" border>
          <el-descriptions-item label="应用名称">{{formOpsApp.name}}</el-descriptions-item>
          <el-descriptions-item label="隶属项目">
            <el-tag type="warning" size="mini" >{{formOpsApp.projectName}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可运行环境">{{formOpsApp.osStr}}</el-descriptions-item>
          <el-descriptions-item label="项目类型">
            <el-tag size="mini" v-if="formOpsApp.type === 1">app</el-tag>
            <el-tag type="success" size="mini" v-else-if="formOpsApp.type === 2">前端</el-tag>
            <el-tag type="warning" size="mini" v-else-if="formOpsApp.type === 3">后端</el-tag>
            <el-tag type="danger" size="mini" v-else-if="formOpsApp.type === 4">小程序</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="基础表结构路径">{{formOpsApp.tableUrl}}</el-descriptions-item>
          <el-descriptions-item label="项目排序">
            <el-tag type="success" size="mini" >{{formOpsApp.sort}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="项目的仓库地址">{{formOpsApp.git}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-descriptions title="" :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >
          <el-descriptions-item label="应用简介">{{formOpsApp.briefIntroduction}}</el-descriptions-item>
          <el-descriptions-item label="安装文档">{{formOpsApp.installDoc}}</el-descriptions-item>
          <el-descriptions-item label="基础打包方式">{{formOpsApp.packMethodDoc}}</el-descriptions-item>
          <el-descriptions-item label="基础部署方式">{{formOpsApp.deployDoc}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

import {getFullDate, getFullTime} from "@/utils/utils";

export default {
  name: "OpsAppDetailed",
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        showClose: true,
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      formOpsApp: {
        id: null,
        projectId: null,
        name: null,
        os: null,
        type: null,
        packMethodDoc: null,
        deployDoc: null,
        tableUrl: null,
        git: null,
        briefIntroduction: null,
        installDoc: null,
        sort: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      },
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },

    }
  },
  methods: {
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    openOpsAppDetailed(obj){
      this.formOpsApp = obj
      this.tableConfig.show = true
    },
    /**
     * 转换时间戳为时间格式
     */
    getTime(item){
      return getFullTime(item)
    },
    /**
     * 时间转日期
     * @param item 要转换的时间戳
     * @return {string}
     */
    getFullDate(item){
      return getFullDate(item)
    },
  },
}
</script>

<style scoped>

</style>

